---
export interface Props {
  title: string;
  text: string;
  href: string;
}

const { text, title, href } = Astro.props;
---

<a
  href={href}
  target="_blank"
  rel="noopener noreferrer"
  class="w-full cursor-pointer rounded-lg border border-t3-purple-200/20 bg-t3-purple-200/10 transition-colors hover:border-t3-purple-300/50 hover:bg-t3-purple-200/20 hover:no-underline sm:h-64"
>
  <div
    class="flex h-full flex-col items-center justify-center space-y-3 p-4 sm:p-2 md:p-4"
  >
    <div class="h-14 w-14"><slot name="icon" /></div>
    <h2 class="text-xl font-black">{title}</h2>
    <p class="text-center">
      {text}
    </p>
  </div>
</a>
